<template>
	<view class="withdrawal-wrap">
		<view class="withdrawal-bank">
			<u-title value="提现银行卡"></u-title>
			<view class="withdrawal-section" v-if="!userBankCard" @click.stop="gotoRouter('/pages-doctor/bankCard/bankCard?type=1')">
				<image src="http://k8s.vendingtech.vip/images/plus@2x.png" class="withdrawal-section-icon"></image>
				<view class="withdrawal-section-word">选择银行卡</view>
			</view>

			<view class="withdrawal-card" v-if="userBankCard">
				<view lines="1" class="word1">{{ userBankCard.openBank }}</view>
				<view lines="1" class="word2">{{ userBankCard.name }}</view>
				<view lines="1" decode="true" class="txt2">****&nbsp;&nbsp; ****&nbsp;&nbsp; ****&nbsp;&nbsp; {{ userBankCard.bankNo.substring(userBankCard.bankNo.length-4) }}</view>
			</view>
		</view>

		<view class="withdrawal-balance">
			<u-title value="提现金额"></u-title>
			<view class="bd2">
				<view class="txt2">¥&nbsp;</view>
				<input class="input" v-model="amount" />
			</view>
		</view>

		<view class="withdraw-record" v-if="withdrawRecord.length != 0">
			<u-title value="提现记录"></u-title>

			<view class="withdraw-record-list">
				<view class="withdraw-record-item" v-for="(item, index) in withdrawRecord" :key="index">
					<view class="record-item-info">
						<view class="main3">
							<view class="info3">提现金额</view>
							<view decode="true" class="info4">&nbsp;¥&nbsp;{{ item.settleAmount }}</view>
						</view>

						<view class="info5">手续费：{{ item.serveCharge }} &nbsp;&nbsp;状态：{{ item.status_dictText }}</view>
						<view class="info5">开户行：{{ item.openBank }}</view>
						<view class="info5">卡号：{{ item.bankNo }}</view>
						<view class="info5"></view>
					</view>

					<view class="record-item-left">
						<view class="record-item-date">{{ item.createdTime.substr(0, 10) }}</view>
					</view>
				</view>
			</view>
		</view>

		<u-bottom-button value="提交申请" @click="addWithdrawalRecord()"></u-bottom-button>
	</view>
</template>

<script>
import uTitle from '@/components/u-title/u-title.vue';
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uTitle,
		uBottomButton
	},
	data() {
		return {
			amount: '',
			withdrawRecord: [] //提现记录
		};
	},
	computed: {
		...mapState({
			userBankCard: state => state.userBankCard
		})
	},
	onLoad(option) {
		this.setUserBankCard(null);
	},
	onShow() {
		this.withdrawalRecordList();
	},
	methods: {
		...mapMutations({
			setUserBankCard: 'setUserBankCard'
		}),

		//提现申请
		addWithdrawalRecord() {
			if (!this.userBankCard.bankNo) {
				uni.showToast({
					title: '请选择银行卡',
					icon: 'none'
				});
			}

			if (!this.userBankCard.bankNo) {
				uni.showToast({
					title: '请输入余额',
					icon: 'none'
				});
			}

			this.$api
				.addWithdrawalRecord({
					data: {
						openBank: this.userBankCard.openBank,
						bankNo: this.userBankCard.bankNo,
						name: this.userBankCard.name,
						amount: this.amount
					}
				})
				.then(res => {
					
					if (res.code == 200) {
						this.amount = ""
						uni.showToast({
							title: "提现成功",
							icon: 'none'
						});
						this.withdrawalRecordList();
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//提现记录
		withdrawalRecordList() {
			this.$api
				.withdrawalRecordList({
					params: {
						pageSize: 100
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.withdrawRecord = res.result.records;
					}
				});
		}
	}
};
</script>

<style lang="less">
@import './withdrawal.less';
</style>
